<script lang="ts" setup>
import { ref } from 'vue'

import { useVbenModal } from '@vben/common-ui'

import { Button, message, Space } from 'ant-design-vue'

import { useVbenForm } from '#/adapter/form'
import {categoryInfo, categoryUpdata, getCategoryTree} from '#/api/goodsCategory'
import { supplyUserEdit } from '#/api/supplyUser'

const emit = defineEmits(['refresh'])

const idsArr: any = ref([])
const inputDisabled = ref(true)

let GoodsCategory = ref([])
const [BaseForm, baseFormApi] = useVbenForm({
  showDefaultActions: false,
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  layout: 'horizontal',
  schema: [
    {
      component: 'TreeSelect',
      componentProps: {
        allowClear: true,
        placeholder: '上级分类',
        treeData: GoodsCategory,
      },
      fieldName: 'parent_id',
      label: '上级分类',
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '分类名称',
      },
      fieldName: 'category_name',
      label: '分类名称',
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '分类编号',
      },
      fieldName: 'category_code',
      label: '分类编号',
    },
    {
      component: 'InputNumber',
      componentProps: {
        allowClear: true,
        placeholder: '排序',
      },
      fieldName: 'view_order',
      label: '排序',
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '代码',
      },
      fieldName: 'goods_no_code',
      label: '代码',
    },
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '货号编码',
      },
      fieldName: 'scm_code',
      label: '货号编码',
    },
  ],
  wrapperClass: 'grid-cols-1',
})

const [Modal, modalApi] = useVbenModal({
  destroyOnClose: true,
  class: 'w-[45%] h-[60%]',
  appendToMain: true,
  fullscreenButton: false,
  onCancel() {
    modalApi.close()
    emit('refresh')
  },
  onConfirm: async () => {
    await baseFormApi.validateAndSubmitForm()
  },
  onOpenChange: async (isOpen: boolean) => {
    if (isOpen) {
      const { rowData, view } = modalApi.getData<Record<string, any>>()
      getCategoryTree().then((res: any) => {
        GoodsCategory.value = res
      })

      if (view === 'add') {
        inputDisabled.value = false
      } else if (view === 'edit') {
        if (Array.isArray(rowData)) {
          // 如果是多个编辑
          idsArr.value = rowData
          initData(rowData[0])
        } else {
          inputDisabled.value = true
          initData(rowData)
        }
      }
    }
  },
})

async function initData(rowData: any) {
  categoryInfo({ id: rowData }).then(async (response) => {
    const row = response.row
    await baseFormApi.setValues(row, false)
  })
}

// 保存
async function save() {
  const { valid } = await baseFormApi.validate()
  if (!valid) {
    return
  }
  const values = await baseFormApi.getValues()
  const parmas = {
    ...values,
  }

  categoryUpdata(parmas).then((res: any) => {
    if (res.data.code === 1) {
      message.success(res.data.msg)
      modalApi.close()
      emit('refresh')
    } else {
      message.error(res.data.msg)
    }
  })
}
</script>

<template>
  <Modal title="编辑">
    <BaseForm />
    <template #footer>
      <div class="flex justify-end">
        <Space>
          <Button @click="modalApi.close()">取消</Button>
          <Button type="primary" @click="save()">保存</Button>
        </Space>
      </div>
    </template>
  </Modal>
</template>

<style scoped></style>
